<template>
	<div class="form-container">
		<el-form ref="model" :model="model" :rules="rules" label-width="100px" class="demo-ruleForm">
			<el-form-item label="活动名称" prop="name">
				<el-input v-model="model.name"></el-input>
			</el-form-item>
			<el-form-item label="活动区域" prop="region2">
				<el-select2 v-model="model.region2" placeholder="请选择活动区域">
					<el-option label="区域一" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select2>
			</el-form-item>
			<el-form-item label="原版手机版有BUG" prop="region">
				<el-select v-model="model.region" placeholder="请选择活动区域">
					<el-option label="区域一" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="相关文章" prop="articleID">
				<remoteselect v-model="model.articleID" url="/api/Public/List" value-label="title" value-key="id"
					query-key="title" value-type="String">
					<template v-slot="{ row }">
						{{row.title + "/" + row.uuid}}
					</template>
				</remoteselect>
			</el-form-item>
			<el-form-item label="相关文章2" prop="articleID2">
				<remoteselect v-model="model.articleID2" url="/api/Public/List" value-label="title" value-key="id"
					query-key="title" value-type="String">
					<template v-slot="{ row }">
						{{row.title + "/" + row.uuid}}
					</template>
				</remoteselect>
			</el-form-item>
			<el-form-item label="参加人数" prop="count">
				type="number" pattern="\d*":
				<input type="number" pattern="\d*" />
				<!--[1-9][0-9]*[.]{0,1}[0-9]*-->
				<br />
				type="number":
				<input type="number" value="" />
				<br />
				el-input:
				<el-input type="number" pattern="\d*"></el-input>
				<br />
				el-input-number \d*:
				<el-input-number type="number" pattern="\d*" v-model.number="model.count"></el-input-number>
				el-input-number [\d,]+\.?[\d]*:
				<el-input-number type="number" pattern="[\d,]+\.?[\d]*" v-model.number="model.count"></el-input-number>
			</el-form-item>
			<el-form-item label="即时配送" prop="delivery">
				<el-switch v-model="model.delivery"></el-switch>
			</el-form-item>
			<el-form-item label="活动性质" prop="type">
				<el-checkbox-group v-model="model.type">
					<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
					<el-checkbox label="地推活动" name="type"></el-checkbox>
					<el-checkbox label="线下主题活动" name="type"></el-checkbox>
					<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="特殊资源" prop="resource">
				<el-radio-group v-model="model.resource">
					<el-radio label="线上品牌商赞助"></el-radio>
					<el-radio label="线下场地免费"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="活动形式" prop="desc">
				<el-input v-model="model.desc" type="textarea"></el-input>
			</el-form-item>
			<slot name="date">
				<el-form-item label="日期" prop="date">
					<el-date-picker v-model="model.date" type="date" :picker-options="pickerOptions">
					</el-date-picker>
				</el-form-item>
			</slot>
			<el-form-item label="日期范围" prop="date">
				<el-date-picker v-model="model.daterange" type="daterange">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="日期时间" prop="date">
				<el-date-picker v-model="model.datetime" type="datetime" :picker-options="pickerOptions">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="图片展示" prop="img" :inline-message="true">
				<el-image class="img2" :preview-src-list="model.img" :src="model.img[0]" v-if="!!model.img"></el-image>
			</el-form-item>
			<el-row>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="图片选择" prop="img" :inline-message="true">
						<uploadimg ref="uploadimg" v-model="model.img" :max="9" :sysFileList="true" :width="60" :height="30">
						</uploadimg>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="文件选择" prop="file" :inline-message="true">
						<uploadfile ref="uploadfile" v-model="model.file" :max="9" :sysFileList="true">
						</uploadfile>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="富文本" prop="file" :inline-message="true">
						<editor ref="editor" v-model="model.Content"></editor>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item style="display: block;text-align: center;">
				<el-button type="primary" @click="submitForm('model')" v-if="button.保存">
					保存
				</el-button>
				<el-button @click="resetVal('model')">重置</el-button>

				<el-button type="primary" @click="testNavigateTo" v-if="button.保存">
					保存跳转测试那边是否刷新
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import common from "@/common/common.js";

	export default {
		name: "Form",
		components: {},
		mixins: [common.baseVM],
		data() {
			return {
				button: {
					保存: true
				},
				model: {
					name: "",
					region: "",
					region2: "",
					count: 0,
					delivery: false,
					type: [],
					resource: "",
					desc: "",
					date: null,
					datetime: null,
					daterange: null,
					img: ["/static/img/default.jpg"],
					file: ["/static/img/default.jpg"],
					articleID: 2,
					articleID2: null,
					Content: ""
				},
				remoteSelectList: [{
					"uuid": "6e4d4CEF-E3c6-d962-ccb4-FC21Ec3BE067",
					"id": 1,
					"title": "remoteSelectList111",
					"status": "published",
					"author": "马娜",
					"datetime": "2015-03-25 05:19:35",
					"pageViews": 4129,
					"img": "https://picsum.photos/200/200?random=c20Ff3dc-90C5-CBFC-831A-C7Fe1d9cf5aC",
					"smallImg": "https://picsum.photos/40/40?random=0B8c3Bcd-bCe8-9BD7-A1cC-909f217eCbc4",
					"switch": true,
					"percent": 87
				}, {
					"uuid": "665CAEa5-5Bb1-8Dc7-4C2f-a4FF08EedAb6",
					"id": 100,
					"title": "remoteSelectList222",
					"status": "published",
					"author": "张芳",
					"datetime": "1976-06-04 12:44:11",
					"pageViews": 466,
					"img": "https://picsum.photos/200/200?random=991e6E7b-fd6d-FC6A-32D6-d5e3257e7fAF",
					"smallImg": "https://picsum.photos/40/40?random=2b90e381-3C65-FEFb-eeEd-2Dc1f7e1FBB9",
					"switch": false,
					"percent": 94
				}],
				rules: {
					name: [
						// { required: true, message: "请输入活动名称", trigger: "blur" },
						// {
						//   min: 3,
						//   max: 5,
						//   message: "长度在 3 到 5 个字符",
						//   trigger: "blur",
						// },
						{
							validator: (rule, value, callback) => {
								if (value == null || value == "") {
									callback(new Error("请输入活动名称"));
									return;
								}
								if (value.length < 3 || value.length > 5) {
									callback(new Error("长度在3到5个字符"));
									return;
								}
								callback();
							},
							trigger: "blur",
						},
					],
					region: [{
						required: true,
						message: "请选择活动区域",
						trigger: "change"
					}, ],
					type: [{
						type: "array",
						required: true,
						message: "请至少选择一个活动性质",
						trigger: "change",
					}, ],
					resource: [{
						required: true,
						message: "请选择活动资源",
						trigger: "change"
					}, ],
					desc: [{
						required: true,
						message: "请填写活动形式",
						trigger: "blur"
					}],
				},
			};
		},
		methods: {
			submitForm(formName) {
				this.formValidate(formName, () => {
					alert("submit!");
				});
			},
			testNavigateTo() {
				this.refreshList("/pagesX/table");
			}
		},
		created() {
			setTimeout(() => {
				this.model.Content = '富文本';
			}, 1000);
			// var post = this.toKeyValue({
			// 	title: "称"
			// });
			// this.post("http://192.168.77.177:88/api/Public/List", post).then((data) => {
			// 	console.log(data);
			// });
			// var post = this.toModel({
			// 	ID: 1,
			// 	TblTestName: '',
			// 	Remark: "123321321"
			// });
			// this.post("http://192.168.77.177:88/api/Public/TblTestAdd", post).then((data) => {
			// 	console.log(data);
			// });
		}
	};
</script>
